import { createSlice } from "@reduxjs/toolkit";
import type { RootState } from "./index";

// 这里是该模块的state的类型
interface systemState {
  count: number;
}

const initialState: systemState = {
  count: 0,
};

export const systemSlice = createSlice({
  name: "system",
  initialState: initialState,
  reducers: {
    // 将状态加一
    // 没法直接调用，redux的内部的自定义的方法
    add(state: systemState) {
      state.count += 1;
    },
    // 将状态减一
    reduce(state: systemState) {
      state.count -= 1;
    },
  },
});

// 导出的方法是用于生成 { type: "add", payload: "" } 的对象
export const { add, reduce } = systemSlice.actions;
// 方便使用者去使用方法
// add() 生成一个对象 { type: "add", payload: "" }
// dispatch 是 useDispatch() 实例
// dispatch({ type: "add", payload: "" }) === dispatch(add())

export const selectCount = function (state: RootState) {
  return state.system.count;
};
// 方便使用者去使用state
// 类似vuex中 mapState;
// useSelector() 实例化一个函数
// useSelector(state => state.system.count) === useSelector(selectCount);

export default systemSlice.reducer;
